<template>
	<div>
		<div :id="id" class="mychart"></div>
	</div>
</template>

<script>
	export default {
		props: {
			id: {
				type: String,
				default: ''
			},
		},
		methods: {
			renderChart(data) {
				var _this = this;
				let myChart = this.$echarts.init(document.getElementById(this.id))
				// 绘制图表
				myChart.setOption({
					title: {
						text: data.title
					},
					tooltip: {},
					xAxis: {
						data: data.x
					},
					yAxis: {},
					series: [{
						type: 'bar',
						label: {
							normal: {
								show: true,
								position: 'inside'
							}
						},
						data: data.y
					}]
				});
			}
		},
		mounted() {}
	}
</script>

<style scoped>
	.mychart {
		width: 100%;
		height: 30rem;
	}
</style>
